<template>
    <div class="mine-shopsettle-detail-wrap">
        <van-nav-bar title="水机取水" left-arrow fixed @click-left="onClickLeft" />
        <div class="water-machine">
            <img :src="waterInfo.store_cover_url" alt="" style="width: 25%; height: auto"/>
            <div class="water-machine-info">
                <div>水机名称：{{waterInfo.name}}</div>
                <div>ID编号:{{waterInfo.device_no}}</div>
            </div>
        </div>
         <div class="water-machine">
            <div class="water-machine-amt" @click="$router.push('/myWater')">我的水袋余额：{{waterInfo.water_num}}袋</div>
            <van-stepper v-model="amount" :max="waterInfo.water_num" :min="0"/>
        </div>
        <div class="btn" @click="handleWater">确认取水</div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
    data() {
        return {
            deviceNo: this.$route.query.device_no,
            amount:0,
            amt:10,
            waterInfo:{}
        }
    },
    created() {
        //有code没token 去code换token-----/share/login   
        //有token没code   ---
        const token = localStorage.getItem('token');

        const pageCode = this.getQueryString('code');
        if(pageCode&&!token){
            this.$http.post('/share/login', {
					code:pageCode,
                    type:2
				})
				.then(res => {
					if(res.data.bind_user==0){
                        this.$router.push('/phone-login')
                    }else{
                        localStorage.setItem('token', `${res.data.token.token_type} ${res.data.token.access_token}`)
                        this.getShopInfo()
                    }
				})
        }else{
            this.getShopInfo()
        }
    },
    methods: {
        getQueryString(name) {
			  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			  let r = window.location.search.substr(1).match(reg);
			  if (r != null) return decodeURIComponent(r[2]);
			  return null;
			},
        getShopInfo() {
            this.$http.get(`/water_machine/info/${this.deviceNo}`)
                .then(res => {
                    this.waterInfo = res.data
                })
        },
        onClickLeft() {
            this.$router.back()
        },
        handleWater(){
            if(this.amount == 0){
                this.$toast('请输入取水数量')
                return
            }
            Dialog.confirm({
            //   title: '标题',
              message: '是否确认取水',
              confirmButtonColor:'#1D69E4'
            })
              .then(() => {
                // on confirm
                this.$http.post(`/water_machine/verify`,{
                    device_no: this.waterInfo.device_no,
                    quantity:this.amount
                })
                .then(res => {
                    this.$toast.success('取水成功')
                    this.getShopInfo()
                })
              })
              .catch(() => {
                // on cancel
              });
        }
    }
}
</script>

<style lang="scss">
.mine-shopsettle-detail-wrap {
    min-height: 100vh;
    padding-top: 58px;
    background-color: #f5f5f5;
    box-sizing: border-box;

    .van-nav-bar .van-icon {
        color: #333333;
    }

    .van-nav-bar__arrow {
        font-size: 20px;
    }
    .van-stepper{
        border: 1px solid #F2F2F2;
    }
    .van-stepper__input{
        color: #1D69E4;
        background-color: #fff;
    }
    .water-machine{
        width:95%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        padding:.24rem;
        box-sizing: border-box;
        // height: 2.04rem;
        border-radius: .16rem;
        margin-bottom:.24rem;
        .water-machine-amt{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .28rem;
            color: #1D69E4;
            // line-height: 20px;
            text-align: left;
            font-style: normal;
        }
        img{
            width: 20%;
        }
        .water-machine-info{
            width: 71%;
            font-family: PingFangSC, PingFang SC;
            color: #333333;
            // line-height: 20px;
            text-align: left;
            font-style: normal;
            div:first-child{
                font-size: .28rem;
                font-weight: 500;
                margin-bottom: .32rem;
                margin-top: .12rem;
                width:100%;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            div:last-child{
                font-size: .24rem;
                color: #666666;
            }
        }
    }
    .btn{
        width: 80%;
        height: .88rem;
        background: linear-gradient( 90deg, #4A89EC 0%, #1261E2 100%);
        border-radius: .88rem;
        margin:0 auto;
        margin-top:2.44rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: .32rem;
        color: #FFFFFF;
        line-height: .88rem;
        text-align: center;
        font-style: normal;
    }
}
</style>
